<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瓷都：景德镇</title>
<style>body{
  background-color: pink;
}
  div{
    display: block;
  }
    .b{
        width: 100%;height: 350px;
        position: relative;

    }
    .b img{
      width: 100%;
      height: 350px;
    }
    .c{
      position: absolute;
      top: 80%;
      width: 100%;
      text-align: center;
      font-size: 60px;
      font-style: italic;
      color: yellow;
    }
.a{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.a li {
  float: left;
}

 a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
.box{
            width: 1200px;
            height: 1500px;
            
            margin: 0  auto   ;
        }
        .left{
            float: left;
            width: 240px;
            height: 1500px;
            background-color: white;
            position: fixed;
        }
        .right{
            float: right
            ;
            width: 960px;
            height: 1500px;
            background-color: white;
            font-size: 30px;
            
        }
        
          
</style>
</head>
<body>
   <div class="b">
<img src="5.jpg" alt="">
<div class="c">
  最美瓷都
</div>
   </div>
<ul class="a">
  <li><a href="#home">首页</a></li>
  <li><a href="#news">最新报道</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">权威发布</a>
    <div class="dropdown-content">
      <a href="#">学习贯彻精神</a>
      <a href="#">图片</a>
      <a href="#">视频</a>
    </div>
  </li>
</ul>
<div class="box">
    <div class="left"><h3>目录</h3>
        <ul>
            <li>珠山区</li>
            <li>乐平市</li>
            <li>浮梁县</li>
            <li>昌江区</li>
        </ul></div>
    <div class="right">
        <span style="font-size: 21.75pt; color: rgb(217, 0, 13);">隶属景德镇四大地区</span>
        <img src="/images/5d5a0c53eada4ec9856b91b4a4f69afe.jpg" alt="">
        <h4>珠山区</h4>
        <img src="1.jpg" alt="">
        原名立马山，秦朝番君吴芮曾登山立马，故得名。位于江西省东北部，东北与浮梁县毗邻，西南同昌江区接壤，昌江自北向南纵贯全。行政区划面积111平方千米，辖1个镇、9个街道。是景德镇市的中心城区，地处六山两湖（黄山、九华山、庐山、龙虎山、三清山、武夷山、鄱阳湖、千岛湖）风景区的中心，是全国第一批24座历史文化名城所在地。
        <h4>乐平市</h4>
        <img src="2.jpg" alt="">
        
        <h4>浮梁县</h4>
        <img src="3.jpg" alt="">
        
        <h4>昌江区</h4>
        <img src="4.jpg" alt="">
        
      </div>
</div>

</body>
</html>
